<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { register } from '../api/user'
import { showToast } from 'vant'

const router = useRouter()

// 表单数据
const formData = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  name: '',
  phoneNumber: '',
  email: ''
})

// 表单校验规则
const rules = {
  username: [{ required: true, message: '请输入用户名' }],
  password: [{ required: true, message: '请输入密码' }],
  confirmPassword: [
    { required: true, message: '请确认密码' },
    {
      validator: (val: string) => val === formData.password,
      message: '两次输入的密码不一致'
    }
  ],
  name: [{ required: true, message: '请输入姓名' }],
  phoneNumber: [
    { required: true, message: '请输入手机号' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
  ],
  email: [
    { required: true, message: '请输入邮箱' },
    { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式不正确' }
  ]
}

// 注册loading
const loading = ref(false)

// 注册方法
const onSubmit = async () => {
  try {
    loading.value = true
    await register({
      username: formData.username,
      password: formData.password,
      name: formData.name,
      phoneNumber: formData.phoneNumber,
      email: formData.email
    })
    showToast('注册成功')
    router.push('/login')
  } catch (error: any) {
    showToast(error.message || '注册失败')
  } finally {
    loading.value = false
  }
}

// 返回登录页
const goToLogin = () => {
  router.push('/login')
}
</script>

<template>
  <div class="register-container">
    <van-nav-bar
      title="注册"
      left-arrow
      @click-left="goToLogin"
    />
    <div class="register-form">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="formData.username"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="rules.username"
          />
          <van-field
            v-model="formData.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="rules.password"
          />
          <van-field
            v-model="formData.confirmPassword"
            type="password"
            name="confirmPassword"
            label="确认密码"
            placeholder="请确认密码"
            :rules="rules.confirmPassword"
          />
          <van-field
            v-model="formData.name"
            name="name"
            label="姓名"
            placeholder="请输入姓名"
            :rules="rules.name"
          />
          <van-field
            v-model="formData.email"
            name="email"
            label="邮箱"
            placeholder="请输入邮箱"
            :rules="rules.email"
          />
          <van-field
            v-model="formData.phoneNumber"
            name="phoneNumber"
            label="手机号"
            placeholder="请输入手机号"
            :rules="rules.phoneNumber"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" :loading="loading">
            注册
          </van-button>
          <div class="login-link" @click="goToLogin">
            已有账号？去登录
          </div>
        </div>
      </van-form>
    </div>
  </div>
</template>

<style scoped>
.register-container {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.register-form {
  padding: 20px;
}

.login-link {
  text-align: center;
  margin-top: 16px;
  color: #1989fa;
  font-size: 14px;
}
</style> 